import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import { Modal } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import FileUpload from '../../components/BatchUpload/Upload';
import Finish from '../../components/BatchUpload/Finish';

@connect(({ injuryware, loading }) => ({
  uploading: loading.effects['publicdata/uploadFile'],
  batchQuery: injuryware.batchQuery,
  fileId: injuryware.fileId,
  fileName: injuryware.fileName,
}))
// @Form.create({
//   mapPropsToFields(props) {
//     const { batchQuery } = props;
//     return {
//       sendType: Form.createFormField({ value: batchQuery.sendType }),
//       isSerSetFlag: Form.createFormField({ value: batchQuery.isSerSetFlag }),
//     };
//   },
// })
@Form.create()
class Batch extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0,
      showProgress: false,
      resultInfo: {
        // 结果数据必传
        batchName: '', // 任务名称
        taskCount: 0, // 导入数据
        successCount: 0, // 成功数据
        errorCount: 0, // 失败数据
        batNo: '', // 批次号
        errorUrl: '/mgrApi/injSecAccoApi/expRatioError', // 下载错误信息地址
        errorParams: null, // 下载错误数据参数
      },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'injuryware/getFileNo',
      payload: {},
    });
  }

  // 设置当前位置
  setCurrentstep = currentStep => {
    this.setState({ currentStep });
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const { dispatch } = this.props;
    const { currentStep, showProgress, resultInfo } = this.state;
    Modal.confirm({
      title: '请注意！',
      icon: <ExclamationCircleOutlined />,
      content:
        '提交后将会根据数据情况生效替数任务，且维护的浮动费率年月信息将不可修改。 是否确认继续操作？',
      onOk: () => {
        dispatch({
          type: 'publicdata/uploadFile',
          uploadUrl: '/mgrApi/injSecAccoApi/upload',
          payload: formData,
          callback: data => {
            // 可选择性操作，需要上传进度必须有调接口，不需要可直接去看结果
            if (showProgress) {
              // 需要展示进度
              // 获取文件批次号
              // this.handleModalVisible(showProgress);
              // if (data.success) {
              //   const interval = setInterval(() => {
              //     dispatch({
              //       type: 'injuryware/getUploadProgress',
              //       payload: { batchId: data.data },
              //       callback: res => {
              //         // 获取文件批次号
              //         if (!res.data || res.data.successProp === 100) {
              //           // 上传完成
              //           clearInterval(interval);
              //           this.handleModalVisible();
              //           resultInfo.errorParams = {
              //             batchId: data.data,
              //             sendType: batchQuery.sendType,
              //             isSerSetFlag: batchQuery.isSerSetFlag,
              //           };
              //           this.setState({
              //             currentStep: currentStep + 1,
              //             resultInfo: { ...resultInfo, ...res.data },
              //           });
              //         } else if (!res.success) {
              //           // 服务端异常
              //           clearInterval(interval);
              //           message.warning(`${res.message || '上传失败'}`);
              //         }
              //       },
              //     });
              //   }, 500);
              // }
            } else {
              // 直接获取结果
              // eslint-disable-next-line no-param-reassign
              // data.errorParams = { batchNo: data.batchNo };
              this.setState({
                resultInfo: {
                  ...resultInfo,
                  errorParams: { batchNo: data.batchNo },
                  taskCount: data.total,
                  successCount: data.numberSuccess,
                  errorCount: data.numberFail,
                  batchName: '批量维护浮动费率',
                },
                currentStep: currentStep + 1,
              });
            }
          },
        });
      },
      onCancel() {},
      okText: '继续提交',
      cancelText: '返回修改',
    });
  };

  // 进度条模态框显隐
  // handleModalVisible = flag => {
  //   this.setState({
  //     progressVisible: !!flag,
  //   });
  // };

  render() {
    const { uploading, fileId, fileName } = this.props;
    const { currentStep, resultInfo } = this.state;
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <FileUpload
            title="上传文件"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: {
                fileName,
                fileId,
              },
              url: '/csApi/fileServer/downloadFile',

              type: 'GET',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default Batch;
